<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-16 09:11:41
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\shen\shen.vue
-->
<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-13 10:45:01
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\shen\shen.vue
-->
<template>
    <div class="w-100 h-100">
    <containTemplete
     :title="'渗-自然入渗,涵养地下水'" 
     :secondTitles="['城市覆盖率','建设面积','植被覆盖率']"
     :slotWidth="[36,36,28]"

     >
    
        <template #left>
            <colums_nomal  
                 v-if="echartsColumData.length>0"
                :xlabel="['透水景观铺装', '透水路面铺装','绿色建筑']"
                :echartsId="'shen_colums'"  
                :echartsData="echartsColumData"
                :derection="'h'"
                :unit="'%'"
                :barWidth="'15%'"
                ></colums_nomal>
        </template>

        <template #middle>
            <div class="w-100 h-100 d-flex">
             <jsmj
             :echartsData="echartsData_project_xmlb"
             v-if="echartsData_project_xmlb.length>0"
             ></jsmj>
            </div>
        </template>

        <template #right>
            <zbfgl  :echartsData="echartsData_zbfgl"
            v-if="echartsData_zbfgl.length>0"
            ></zbfgl>

        </template>
    </containTemplete>
    </div>
</template>

<script setup lang='ts'>
import containTemplete from '@/components/project/containTemplete.vue';
import jsmj  from './jsmj.vue';
import zbfgl from './zbfgl.vue';
const jsonData: any = inject("jsonData");
const echartsColumData=ref([])
const echartsData_project_xmlb=ref([])
const echartsData_zbfgl=ref([])
watch(
    () => jsonData.value,
    (newValue:any, oldValue) => {
        console.log(newValue,'newValue');
        
      if (newValue) {
        echartsColumData.value = newValue.jsc.csfgl
        echartsData_project_xmlb.value = newValue.jsc.jsmj
        echartsData_zbfgl.value = newValue.jsc.zbfgl
        console.log(newValue.jsc.zbfgl,'echartsColumData');
        
      }
    }
);


// const echartsColumData=ref([
//     {
//         name: "规划",
//         value:[20, 36, 40]
//     }, 
//     {
//         name: "现状",
//         value:[20, 30, 15]
//     }, 
// ])

</script>

<style scoped lang="less" >

</style>